<template>
  <div>
    <div class="banxin bread">
        首页 / 个人中心
    </div>
    <div class="banxin">
    <aside>
        <div class="top">
            <img src="" alt="">
            <div class="nickname">世界和平<span>【退出】</span></div>
        </div>
        <ul class="center">
            <section>
                <img src="@/assets/images/person/transaction.png" alt="">
                <span>交易管理</span>
            </section>
            <li>个人中心</li>
            <li>我的订单</li>
            <li>购物车</li>
            <li>消息中心</li>
            <li>积分明细</li>
            <li>积分攻略</li>
        </ul>
        <ul class="bottom">
            <section>
                <img src="@/assets/images/person/information.png" alt="">
                <span>个人信息管理</span>
            </section>
            <li>地址管理</li>
            <li class="on">账号中心</li>
        </ul>
    </aside>
    <main>
        <router-view></router-view>
    </main>
    </div>

  </div>
</template>

<script>
export default {

}
</script>

<style lang="less" scoped>
@import "@/assets/css/base.less";
.bread{
    color: #666666;
    font-size: 16px;
    padding: 18px 0;
    border-bottom: 1px solid #E7E7E7;
    margin: 20px auto;
    text-align:left;
    
}
.banxin{
    overflow: hidden;
aside{
    width: 200px;
    height: 740px;
    float: left;
    padding: 30px 20px;
    box-sizing: border-box;
    background-color: #E7E7E7;
    .top{
        align-items: center;
        
        img{
            width: 100px;
            height: 100px;
        }
        .nickname{
            color: #333;
            font-size: 16px;
            span{
                color: #2A5DF1;
                margin-left: 10px;
                cursor:pointer;
            }
        }
    }
    ul{
       margin: 30px 0;
       text-align: left;
       list-style: none;
       transition: 0.3s;
       section{
        img{
            vertical-align: middle;
        }
        span{
            color:#333;
            font-size: 16px;
            padding: 0 5px;
            font-weight: bold;
        }
       } 
       li{
        margin-top: 20px;
        color: #666;
        font-size: 14px;
        cursor: pointer;
       }
       .on{
        border-left: 3px solid #0A328E;
        color: #0A328E;
        padding-left: 10px;
       }
    }
}
main{
    float: left;
    margin-left: 60px;
    width:calc(100% - 300px);
}
}
</style>